<template>
    <div>
        <div class="header-tab">
            <div class="tab-box">
                <div class="tab-left">
                    <ul>
                        <li>
                            <el-link
                                class="tab-item"
                                icon="el-icon-s-custom"
                                :underline="false"
                                @click="goCpath(1)"
                                >交易平台</el-link
                            >
                        </li>

                        <li>
                            <el-link
                                class="tab-item"
                                @click="goCpath(3)"
                                :underline="false"
                                >平台规定</el-link
                            >
                        </li>
                        <li>
                            <el-link
                                class="tab-item"
                                @click="goCpath(4)"
                                :underline="false"
                                >联系我们</el-link
                            >
                        </li>
                    </ul>
                </div>
                <div v-if="uname != undefined" class="tab-right">
                    <div class="t-r-one">
                        <el-link
                            class="tab-item"
                            :underline="false"
                            @click="goOrder"
                            >个人中心</el-link
                        >
                        <el-badge :value="remind"  class="item">
  <!-- <el-button size="small">回复</el-button> -->
                            <el-link class="tab-item" :underline="false" @click="goPerson"
                                    >回复</el-link>
                        </el-badge>
                        
                        
                    </div>
					<el-dropdown trigger="click">
                            <span class="el-dropdown-link">
								<el-link
									class="tab-item"
									:underline="false"
									>{{ uname }}</el-link
								>
								<i class="el-icon-caret-bottom el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="jumpPage('/orderList')" class="clearfix">
                                    交易信息
                                </el-dropdown-item>
                                <el-dropdown-item @click.native="jumpPage('/product')" class="clearfix">
                                    我的物品
                                </el-dropdown-item>
                                <el-dropdown-item @click.native="jumpPage('/postList')" class="clearfix">
                                    我的帖子
                                </el-dropdown-item>
                                <el-dropdown-item @click.native="jumpPage('/message')" class="clearfix">
                                    我的消息
                                </el-dropdown-item>
                                <el-dropdown-item @click.native="pushBtn" class="clearfix">
                                    退出
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    <div class="t-r-one">
                        
                        
                    </div>
                </div>
                <div v-else class="tab-right">
                    <el-link
                        class="tab-item"
                        :underline="false"
                        @click="dialogVisible = true"
                        >去登录</el-link
                    >
                </div>
            </div>
        </div>
        <el-dialog
            :visible.sync="dialogVisible"
            width="800px"
            @close="addCateDialogClosed"
        >
            <div class="login-tab">
                <h1>Y优账号登录</h1>

                <div class="login-box">
                    <div class="login-box-left">
                        <img src="~assets/img/alllogo.png" alt="" />
                    </div>
                    <div class="login-box-right">
                        <el-form
                            :model="loginForm"
                            :rules="loginRules"
                            ref="loginFormRef"
                            class="demo-ruleForm"
                        >
                            <el-form-item prop="accountName">
                                <el-input
                                    v-model="loginForm.email"
                                    placeholder="请输入邮箱"
                                    clearable
                                    autocomplete
                                    prefix-icon="el-icon-user"
                                    type="email"
                                ></el-input>
                            </el-form-item>
                            <el-form-item prop="pwd">
                                <el-input
                                    v-model="loginForm.pwd"
                                    placeholder="请输入密码"
                                    type="password"
                                    show-password
                                    autocomplete
                                    prefix-icon="el-icon-goods"
                                ></el-input>
                            </el-form-item>
                        </el-form>
                        <div class="login-btn">
                            <el-button type="danger" @click="handleLogin"
                                >立即登录</el-button
                            >
                        </div>
                        <div class="login-bottom">
                            <ul>
                                <li>
                                    <el-link
                                        :underline="false"
                                        @click="goregist"
                                        >注册新用户</el-link
                                    >
                                </li>
                                <li>
                                    <el-link :underline="false"
                                        >忘记密码</el-link
                                    >
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div></div>
            </div>
            <span slot="footer" class="dialog-footer">
                <span> </span>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { goLogin, getUserinfo } from "network/request.js";
export default {
    data() {
        return {
            uname: window.sessionStorage.getItem("uname"),
            remind:window.sessionStorage.getItem('remind') || 0,
            dialogVisible: this.$store.state.loginShow,
            codeImg: "",
            drawer: false,
            loginForm: {
                email: "",
                pwd: "",
            },

            loginRules: {
                email: [
                    { required: true, message: "请输入账号", trigger: "blur" },
                ],
                pwd: [
                    {
                        required: true,
                        message: "请输入登录密码",
                        trigger: "blur",
                    },
                ],
                captcha: [
                    {
                        required: true,
                        message: "请输入正确的验证码",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    watch: {
        "$store.state.loginShow"() {
            this.dialogVisible = this.$store.state.loginShow;
        },
    },
    methods: {
		jumpPage(path) {
			this.$router.push(path);
		},
        addCateDialogClosed() {
            this.$refs.loginFormRef.resetFields();
            this.$store.commit("changelogin", false);
        },
        goPerson() {
            this.$router.push("/message").catch((e) => {});
        },
        goOrder() {
            this.$router.push("/Myorder").catch((e) => {});
        },
        pushBtn() {
            this.$confirm("确定退出吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$message(
                        {
                            type: "success",
                            message: "已退出当前账号!",
                        },
                        window.sessionStorage.clear(),
                        (this.uname = window.sessionStorage.getItem("uname")),
                        this.$router.push("/").catch((e) => {})
                    );
                })
                .catch(() => {});
        },
        goregist() {
            this.$router.push("/Regist");
        },
        handleLogin() {
            this.$refs.loginFormRef.validate(async (valid) => {
                if (!valid) {
                    return this.$message.error("请填写必要的登陆信息！");
                }
                // 执行添加业务逻辑
                const loading = this.$loading({
                    lock: true,
                    text: "正在登陆请稍等~~~",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)",
                });
                const { data: res } = await goLogin(this.loginForm);
                if (res.status === 0) {
                    window.sessionStorage.setItem("token", res.content);
                    const { data: res1 } = await getUserinfo();
                    loading.close();
                    this.$message.success("登陆成功！");
                    console.log(res1);
                    this.uname = res1.content.name;
                    window.sessionStorage.setItem("uname", res1.content.name);
                    window.sessionStorage.setItem("uid", res1.content.id);
                    window.sessionStorage.setItem("email", res1.content.email);
                    window.sessionStorage.setItem("remind", res1.content.remind);
                    this.dialogVisible = false;
                } else if (res.status === 1) {
                    console.log(res);
                    this.$message.error("账号或密码错误！");
                }
            });
        },
        goCpath(i) {
            switch (i) {
                case 1:
                    this.$router.push("/").catch((res) => {});
                    break;
                case 2:
                    this.$router.push("/NewBuy").catch((res) => {});
                    break;
                case 3:
                    this.$router.push("/Rules").catch((res) => {});
                    break;
                case 4:
                    this.$router.push("/About").catch((res) => {});
                    break;
            }
        },
    },
    async created() {
        const { data: res1 } = await getUserinfo();
        window.sessionStorage.setItem("remind", res1.content.remind);
        this.remind = res1.content.remind;
    },
};
</script>

<style scoped lang="scss">
.item {
  margin-top: 5px;
  margin-right: 40px;
}
.header-tab {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background-color: #2e2828;
    height: 40px;
    .tab-box {
        margin: 0 auto;
        width: 80%;
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .tab-left {
        ul {
            display: flex;
            list-style: none;
            li {
                margin: 0px 20px;
            }
        }
    }
    .tab-right {
        display: flex;
        .t-r-one {
            display: flex;
            align-items: center;
            margin: 0 10px;
            .tab-item {
                margin: 0px 5px;
            }
        }
    }
}
.tab-item {
    color: #fff;
}
.tab-item:hover {
    color: #fff;
}
.login-tab {
    position: relative;
    h1 {
        text-align: center;
    }
    .login-box {
        display: flex;
        justify-content: center;
        margin-top: 40px;
        .login-box-left {
            flex: 1;
            border-right: 1px solid #aaa;
            img {
                width: 80%;
            }
        }
        .login-box-right {
            margin-left: 10px;
            flex: 1;
        }
        .login-btn {
            .el-button {
                width: 100%;
            }
        }
    }
}
.login-bottom {
    display: flex;
    flex-direction: column;

    ul {
        list-style: none;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
    }
}
.dialog-footer {
    // display: flex;
    // flex-direction: column;
    // span {
    //   margin-top: 20px;

    //   ul {
    //     list-style: none;
    //     display: flex;
    //     flex-flow: row nowrap;
    //     justify-content: space-between;
    //   }
    // }
}
</style>
